<div class="row">
    <div class="col-md-8">
        <div class="input-group" style="width: 395px; margin-left: 50px; margin-top: 4px">
            <input type="text" id="skill-name" class="form-control">
            <input type="hidden" id="num-skills" value="0" class="form-control">
        <span class="input-group-btn">
            <button class="btn btn-default" id="add-skills-button" type="button">Add Skill</button>
        </span>
        </div>
    </div>
    <div class="col-md-4 left">
        <ul class="nav nav-pills nav-stacked" style="width: 110px">
            <li class="active">
                <a href="#">
                    <span class="badge pull-right" id="display-num-skills">0/50</span>
                    Skills
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- user_skill_tag -->
<div id="skills" style="margin-top: 10px">
</div>

<div class="template" id="tag-skill">
    <div class="tagSkill">
        <span class="tag user_skill_tag">
            {value}
            <span class="remove-sign">
                x
            </span>
        </span>
        <script>
            $('.remove-sign').click(function() {
                $(this).parent().parent().remove();
            });
            $('.tagSkill').dbclick(function() {
               console.log('OK');
            });
        </script>
    </div>
</div>

<script src="<?php echo $this->basePath()?>/js/widget/skills.js"></script>